<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-08 07:51:53
 * @LastEditTime : 2020-01-12 10:17:11
 * @LastEditors  : Please set LastEditors
 -->
<template>
	<view>
		<view class="product">
			<view class="loan-intro" v-for="(item,index) in productList" :key="index" :data-id="item.id" @click="navigateUrl">
				<!-- 产品头部 -->
				<view class="loan-logo">
					<image :src="hostIp+item.image" mode="widthFix" lazy-load="false">
					</image>
				</view>
				<view>
					<view class="loan-header">
						<view class="loan-title">
							<view>{{item.name}}</view>
						</view>
						<view v-if='loanType!="like"'>
							<view v-if="item.loanType!=0">{{item.readyLoan}}人申请</view>
							<view v-else>{{item.readyLoan}}人已通过申请</view>
						</view>
					</view>
					<!-- 产品内容 -->
					<view class="loan-content">
						<view class="babel">
							<view class="babel-item">
								<view v-if='type=="creditCard"'>最高额度(元)</view>
								<view v-else>贷款金额(元)</view>
							</view>
							<view class="babel-item">
								<view v-if='item.loanType==0'>通过率</view>
								<view v-else>贷款利率</view>
							</view>
						</view>
						<view class="loan-amount">
							<view :class="['amount-num',item.loanType==0?'key0':item.loanType==1?'key1': item.loanType==2?'key2':item.loanType==3?'key3':'key4']">{{item.amount}}万</view>
							<view class="line"></view>
							<view :class="['amount-num',item.loanType==0?'key0':item.loanType==1?'key1': item.loanType==2?'key2':item.loanType==3?'key3':'key4']" style="width: 160upx;">{{item.rate}}%</view>
							<view :class="['detail-btn',item.loanType==0?'key-bg-0':item.loanType==1?'key-bg-1': item.loanType==2?'key-bg-2':item.loanType==3?'key-bg-3':'key-bg-4']"
							 :data-id="item.id" :data-link="item.link" @click="navigateUrl">查看详情</view>
						</view>
						<view class="loan-tips" v-if="item.loanType==1">
							<view class="loan-tips-item">{{item.content?item.content:'按期还款 提前还款无手续费'}}</view>
						</view>
						<view class="loan-tips" v-else>
							<view class="loan-tips-item">{{item.content?item.content:'按期还款 提前还款无手续费'}}</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	import Vue from "vue"
	import InterServer from "@/common/config/server"
	import noData from '@/components/noData/noData';
	export default {
		props: ["productList", "type", "tagActive", 'loanType'],
		components: {
			noData
		},
		data() {
			let hostIp = Vue.globalData.hostIp
			return {
				hostIp,

			};
		},
		created() {},
		methods: {
			//页面跳转
			navigateUrl(e) {
				console.log(e.currentTarget.dataset.id)
				let dataset = e.currentTarget.dataset
				let [id, link] = [dataset.id, dataset.link]
				let url = `./loanDetails?id=${id}`;
				Vue.customNavigateTo(url);
			}
		}
	};
</script>
<style lang="less" scoped>
	.product {
		margin: 0 auto;
		overflow: hidden;
		.loan {
			&-intro {
				margin: 0 auto 18upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 4px 1px rgba(153, 153, 153, 0.2);
				margin-bottom: 20upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			&-logo {
				margin: 0 20upx 0 28upx;

				image {
					width: 92upx;
					height: 92upx;
				}
			}

			&-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 60upx;
				line-height: 40upx;
				border-bottom: 1upx solid rgba(204, 204, 204, 1);
				padding-right: 60upx;
				font-size: 22upx;
				font-family: PingFang-Semibold;
				font-weight: bold;
				color: rgba(102, 102, 102, 1);
				margin-bottom: 6upx;
			}

			&-count {
				width: 200upx;
				height: 30upx;
				text-align: center;
				background: linear-gradient(180deg, rgba(17, 144, 255, 1) 0%, rgba(41, 126, 255, 1) 100%);
				border-radius: 4upx;
				font-size: 22upx;
				font-family: PingFang-Semibold;
				font-weight: bold;
				line-height: 30upx;
				color: rgba(255, 255, 255, 1);
			}

			&-title {
				font-size: 32upx;
				color: rgba(51, 51, 51, 1);
				font-weight: bold;
				display: flex;
				align-items: center;
				font-family: PingFang-Semibold;
			}

			&-content {
				padding: 0 40upx 0 0upx;

				.babel {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 22upx;
					font-family: PingFang-Semibold;
					font-weight: bold;
					line-height: 36upx;
					height: 36upx;
					color: rgba(102, 102, 102, 1);

					.babel-item {
						width: 190upx;
						line-height: 36upx;
						height: 36upx;

						&:nth-child(2) {
							width: 212upx;
							margin-left: 30upx;
						}
					}
				}

				.loan-amount {
					font-size: 24upx;
					height: 30upx;
					font-size: 22upx;
					font-family: PingFang-Semibold;
					font-weight: bold;
					line-height: 30upx;
					color: rgba(102, 102, 102, 1);
					display: flex;
					align-items: center;
					justify-content: flex-start;
					height: 50upx;
					padding: 30upx 0;

					.amount-num {
						width: 190upx;
						font-size: 36upx;
						font-family: PingFang-Semibold;
						font-weight: bold;
						line-height: 50upx;
						height: 50upx;
					}

					.key0 {
						color: #EA5F03;
					}

					.key1 {
						color: #009CFE;
					}

					.key2 {
						color: #009CFE;
					}

					.key3 {
						color: #009CFE;
					}

					.key4 {
						color: #009CFE;
					}
				}

				.line {
					width: 1upx;
					height: 50upx;
					background: rgba(204, 204, 204, 1);
					margin-right: 30upx;
				}

				.detail-btn {
					width: 200upx;
					height: 70upx;
					box-shadow: 0px 2upx 2upx rgba(204, 204, 204, 1);
					border-radius: 35upx;
					font-size: 28upx;
					font-family: PingFang-Semibold;
					font-weight: bold;
					line-height: 70upx;
					text-align: center;
					color: rgba(255, 255, 255, 1);
				}

				.key-bg-0 {
					color: #fff;
					background:linear-gradient(94deg,rgba(255,119,0,1) 0%,rgba(255,153,0,1) 100%);
				}

				.key-bg-1 {
					background:linear-gradient(94deg,rgba(7,93,255,1) 0%,rgba(41,160,254,1) 100%);
				}

				.key-bg-2 {
					background:linear-gradient(94deg,rgba(7,93,255,1) 0%,rgba(41,160,254,1) 100%);
				}

				.key-bg-3 {
					background:linear-gradient(94deg,rgba(7,93,255,1) 0%,rgba(41,160,254,1) 100%);
				}

				.key-bg-4 {
					background:linear-gradient(94deg,rgba(7,93,255,1) 0%,rgba(41,160,254,1) 100%);
				}
			}

			&-tips {
				display: flex;
				align-items: center;
				font-size: 20upx;
				font-family: PingFang-Semibold;
				font-weight: bold;
				line-height: 28upx;
				color: rgba(102, 102, 102, 1);
				padding: 0 0 15upx 0;

				&-item {
					margin-right: 26upx;
				}
			}
		}

		.loding-more {
			height: 90upx;
			line-height: 90upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #1b65fa;
			font-size: 26upx;

			image {
				width: 26upx;
				height: 28upx;
				margin-left: 15upx;
			}
		}
	}
</style>
